<template>
<div :class="$style.container">
  <ul v-if="lists.length > 0"> 
    <li v-for="(item,idx) in lists" :key="'order'+idx">   
      <div :class="$style.line"></div>
      <section>
        <h4>订单编号: {{item.orderId}}</h4>
        <div :class="$style.content">
          <img v-lazy="item.poster">
          <div :class="$style.right">
            <div :class="$style.title">{{item.original_title}}</div>
            <p :class="$style.price">￥{{item.price.toFixed(2)}}</p>
          </div>
        </div>
        <div :class="$style.bottom">
          <div :class="$style.left">
            总价: <span>￥{{item.price}}</span>
          </div>
          <div :class="$style.right">{{item.status === 0 ? '未支付' : item.status === 1 ? '已支付' : '未知状态'}}</div>
        </div>
      </section>
    </li>
  </ul>
  <div v-else :class="$style.noOrder">
    <i/>
    <p :class="$style.tip">您还没有相关的订单</p>
    <div :class="$style.btn" @click.stop="handleBtnClick">随便看看</div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleBtnClick () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style lang='less' module>
.container {
  ul { 
    li { 
      section {
        padding: 0px 10px;
        box-sizing: border-box;
        h4 {
          color: #71777d;
          font-size:12px;
          line-height: 40px;
          &:after {
            display: block;
            content: '';
            overflow: hidden;
            height:1px;
            width: 100%;
            background: #d9dde1;
            transform: scaleY(50%);
          }
        }
        .content {
          padding-top: 8px;
          box-sizing: border-box;
          &:after {
            margin-top:8px;
            display: block;
            content: '';
            overflow: hidden;
            height:1px;
            width: 100%;
            background: #d9dde1;
            transform: scaleY(50%);
          }
          img {
            margin-right:10px;
            width: 105px;
            height:59px;
            object-fit: cover;
            vertical-align: top;
          }
          .right {
            position: relative;
            display: inline-block;
            width: 235px;
            height:59px;
            .title {
              margin-top:4px;
              color: #2b333b;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 16px;
            }
            .price {
              position: absolute;
              left:0;
              bottom:4px;
              color: #F01414;
              font-size:14px;
            }
          }
        }
        .bottom {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          height:50px;
          .left {
            color: #71777d;
            font-size:12px;
            span {
              margin-left:8px;
              color: #ff2d50;
              font-size:14px;
            }
          }
          .right {
            color:#5e5e5e;
            font-size:12px;
          }
        }
      }
    }
  }
  .line {
    background: #f2f4f6;
    width: 100%;
    height:8px;
  }
  .noOrder {
    margin-top:130px;
    text-align: center;
    i {
      display: inline-block;
      width: 108px;
      height:108px;
      background: url('../../order/imgs/noOrder.png') no-repeat center center;
      background-size: cover;  
    }
    .tip {
      margin: 6px 0px;
      font-size:16px;
      color:#333333;
    }
    .btn {
      margin-top:40px;
      padding: 0px 23px;
      display: inline-block;
      font-size: 13px;
      line-height: 32px;
      height: 32px;
      color: #ffffff;
      background-image: -webkit-linear-gradient(left, #fd9126, #ff5000);
      background-image: linear-gradient(to right, #fd9126, #ff5000);
      border-radius: 16px;
    }
  }
}

</style>